{{! Sidebar card packs }}
<div class="mt-4 px-5">
    <h2 class="text-xl font-medium text-base-content">
        Card Packs
    </h2>
</div>
<div class="mt-4 relative flex flex-col px-5">
    <div class="flex items-center justify-between mb-2">
        <div class="flex-1 min-w-0">
            <h3 class="inline-flex text-md font-bold text-base-content truncate">
                <svg class="mr-1 mt-1 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" />
                </svg>
                Base Deck
            </h3>
            <div class="mt-1 flex flex-col sm:flex-row sm:flex-wrap sm:mt-0 sm:space-x-6">
                <div class="flex items-center text-sm text-base-content">
                    52 cards, 9 actions
                </div>
            </div>
        </div>
        <div class="flex mt-0 ml-4">
            <span class="">
                  <button type="button" class="inline-flex items-center px-2 py-1 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-success focus:outline-none">
                        <svg class="-ml-1 mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                        </svg>
                        Imported
                  </button>
            </span>
        </div>
    </div>
    {{! Yolking around }}
    <div class="flex items-center justify-between mb-2">
        <div class="flex-1 min-w-0">
            <h3 class="inline-flex text-md font-bold text-base-content truncate">
                <svg class="mr-1 mt-1 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" />
                </svg>
                Yolking Around
            </h3>
            <div class="mt-1 flex flex-col sm:flex-row sm:flex-wrap sm:mt-0 sm:space-x-6">
                <div class="flex items-center text-sm text-base-content">
                    18 cards, 7 actions
                </div>
            </div>
        </div>
        <div class="flex mt-0 ml-4">
            <span class="" id="pack_yolking_around">
                  <button type="button" class="inline-flex items-center px-2 py-1 border border-base-content rounded-md shadow-sm text-sm font-medium text-base-content bg-base-100 hover:bg-base-200 focus:outline-none">
                        <svg xmlns="http://www.w3.org/2000/svg" class="-ml-1 mr-1 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                        </svg>
                        Available
                  </button>
            </span>
        </div>
    </div>
    {{! Link to card desc }}
    <div class="flex items-center justify-between mb-2">
        <div class="flex-1 min-w-0">
            <div class="mt-1 flex flex-col sm:flex-row sm:flex-wrap sm:mt-0 sm:space-x-6">
                <div class="flex items-center text-xs text-base-content">
                    <p>Confused on how to use a card? Refer to the <a class="text-info" target="_blank" href="/#base-pack">card descriptions</a></p>
                </div>
            </div>
        </div>
    </div>
</div>